<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        :title="'购物车-' + totalNum"
        left-arrow
        @click-left="$router.back()"
      />
    </header>
    <div class="content">
      <div v-if="empty">
        <van-empty description="购物车空空如也">
          <router-link to="/kind">
            <van-button round type="danger" class="bottom-button">
              立即选购
            </van-button>
          </router-link>
        </van-empty>
      </div>
      <div v-else>
        <van-row v-for="item of cartList" :key="item.cartid">
          <van-col span="3" class="checkboxList">
            <van-checkbox @change="updateFlag(item.cartid, item.flag)" v-model="item.flag"></van-checkbox>
          </van-col>
          <van-col span="21">
            <van-swipe-cell>
              <van-card
                :price="item.originprice"
                :title="item.proname"
                :thumb="item.img1"
              >
                <template #num>
                  <van-stepper @change="updateNum(item.cartid, item.num)" v-model="item.num" max="5" theme="round" button-size="22" />
                </template>
              </van-card>
              <template #right>
                <van-button @click="removeItem(item.cartid)" square text="删除" type="danger" class="delete-button" />
              </template>
            </van-swipe-cell>
          </van-col>
        </van-row>
        <van-submit-bar :disabled="flag" :price="totalPrice" button-text="提交订单" @submit="onSubmit">
          <van-checkbox @click="updateAllFlag" v-model="checked">全选</van-checkbox>
        </van-submit-bar>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { NavBar, Stepper, Empty, Button, Col, SubmitBar, Row, Card, Checkbox, SwipeCell } from 'vant'
import { getCartList, remove, updateCartNum, selectall, selectone } from './../../api/cart'
Vue.use(NavBar)
Vue.use(Empty)
Vue.use(Button)
Vue.use(Col)
Vue.use(Row)
Vue.use(Checkbox)
Vue.use(Card)
Vue.use(SwipeCell)
Vue.use(Stepper)
Vue.use(SubmitBar)
export default {
  data () {
    return {
      cartList: [],
      empty: true,
      checked: false
    }
  },
  computed: {
    totalNum () {
      return this.cartList.reduce((sum, item) => {
        return item.flag ? sum + item.num : sum + 0
      }, 0)
    },
    totalPrice () {
      return this.cartList.reduce((sum, item) => {
        return item.flag ? sum + item.originprice * item.num : sum + 0
      }, 0) * 100
    },
    flag () { // 提交订单按钮可点不可点
      return this.totalNum <= 0
    }
  },
  methods: {
    onSubmit () {
    },
    updateFlag (cartid, flag) {
      console.log(cartid, flag)
      selectone({
        cartid, flag
      }).then(res => {
        this.getCartListData()
      })
    },
    updateAllFlag () {
      selectall({
        userid: localStorage.getItem('userid'),
        type: this.checked
      }).then(res => {
        this.getCartListData()
      })
    },
    getCartListData () {
      getCartList({
        userid: localStorage.getItem('userid')
      }).then(res => {
        console.log(res.data)
        // 没有数据
        if (res.data.code === '10020') {
          this.empty = true
          this.cartList = [] // 防止删除完最后一个元素时总价和总数量不一致
        } else {
          this.empty = false
          this.cartList = res.data.data
          // 判断全选是不是被选中
          // every 所有的条件都满足返回为true，只要有一个不满足返回为false
          this.checked = res.data.data.every(item => item.flag)
        }
      })
    },
    updateNum (cartid, num) {
      console.log(cartid, num)
      updateCartNum({
        cartid,
        num
      }).then(res => {
        this.getCartListData() // 重新获取最新的数据
      })
    },
    removeItem (cartid) {
      remove({
        cartid
      }).then(res => {
        this.getCartListData() // 重新获取最新的数据
      })
    }
  },
  mounted () {
    if (localStorage.getItem('isLogin') === 'true') {
      this.getCartListData()
    } else {
      this.$router.push('/login')
    }
  }
}
</script>
<style lang="stylus" scoped>
.checkboxList
  display flex
  height 1.04rem
  justify-content center
  align-items center
  background-color #fafafa
.delete-button {
  height: 100%;
}
</style>
